<template>
  <Detail-dialog
    modal
    width="40"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')">
    <el-form  ref="dataForm" :model="departmentInfo" label-width="80px" :rules="rules">
        <el-row>
          <el-col :span="12" :offset="3">
          <el-form-item label="部门名称" prop="departmentName">
               <el-input  class="wp-form-280" clearable v-model="departmentInfo.departmentName" placeholder="部门名称"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row  v-if="showParent" >
          <el-col :span="12" :offset="3">
               <el-form-item label="上级部门" prop="parentCode">
                <Select-Depart
                 clearable v-model="departmentInfo.parentCode" :hiddenChildren="departmentInfo.departmentCode"></Select-Depart>
               </el-form-item>
               </el-col>
        </el-row>
        <el-row>
        <el-row>
          <el-col :span="12" :offset="3">
            <el-form-item label="所属公司" prop="companyCode">
              <SelectCompany  v-model="departmentInfo.companyCode"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12" :offset="3">
            <el-form-item  label="负责人">
                <Employee-seach :employeeCode.sync="departmentInfo.chargePerson" :employeeName.sync="departmentInfo.chargePersonName"/>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
  </Detail-dialog>
</template>

<script>
import SelectDepart from '@/views/system/components/department/select'
import SelectCompany from '@/views/system/components/company'
import DetailDialog from '@/components/DetailDialog'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import dempartment from '@/api/system/dempartmentAPI'
export default {
  props: {
    visible: Boolean,
    title: String,
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.departmentInfo = {...val}
          this.showParent = val.parentCode && val.parentCode !== '0'
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: {DetailDialog, SelectDepart, EmployeeSeach, SelectCompany},
  data () {
    return {
      dialogShow: false,
      showParent: true,
      departmentInfo: {},
      rules: {
        departmentName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        companyCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
        parentCode: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          if (this.departmentInfo.departmentCode) {
            if (this.departmentInfo.departmentCode === this.departmentInfo.parentCode) {
              this.$msgBox.error('当前上级部门不可以设置')
              return
            }
            dempartment.updateDepartmentAPI(this.departmentInfo).then(res => {
              if (res.code === 0) {
                this.close()
                this.$emit('afterSave', res)
              }
            })
          } else {
            dempartment.addDepartmentAPI(this.departmentInfo).then(res => {
              if (res.code === 0) {
                this.close()
                this.$emit('afterSave', res)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
